<template>
    <div class="loginContainer">
        <div>
            <div class="login_top">
                <img src="../assets/login/portrait.png"/>
                <span>{{form.name}}</span>
            </div>
            <!--<el-form ref="form" :model="form" label-width="50px" label-position="left" size="mini">-->
                <!--<el-form-item>-->
                    <!--<el-input v-model="form.name" style="width:80%;" prefix-icon="el-icon-search"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item>-->
                    <!--<el-input v-model="form.bdnum"  style="width:80%;" prefix-icon="el-icon-search"></el-input>-->
                <!--</el-form-item>-->
                <!--<el-form-item style="text-align: center">-->
                    <!--<el-button type="primary" @click="onSubmit">登录</el-button>-->
                <!--</el-form-item>-->
            <!--</el-form>-->
           <div class="login_bottom">
               <div class="login_main">
                   <div class="login_name">
                       <img src="../assets/login/loginname.png"/>
                       <span>姓名</span>
                       <input v-model="form.name"></input>
                   </div>

                   <div class="login_bdid">
                       <img src="../assets/login/login_bdid.png"/>
                       <span>卡号</span>
                       <input v-model="form.bdnum"></input>
                   </div>
               </div>

               <div class="login_btn" @click="onSubmit">
                   <button>登录</button>
               </div>
           </div>

        </div>
    </div>
</template>

<script>
    import {getPeoMes} from '@/request/api'
    export default {
        data() {
            return {
                form: {
                    name: '蒋静亭',
                    bdnum: '1234567'
                },
                websocket:null,
            }
        },
        methods:{
            onSubmit() {
                if(this.isEmptyStr(this.form.name)&&this.isEmptyStr(this.form.bdnum)){
                    this.$message({
                        message: '姓名、北斗卡号不能为空',
                        type: 'warning'
                    });
                    return;
                }
                let that = this;
                getPeoMes({search:this.form.bdnum}).then(res=>{
                    console.log(JSON.stringify(res.data))                  // debugger
                    this.$systemMes.carrerType=res.data.rows[0].ztlx;
                    sessionStorage.setItem('carrtype',res.data.rows[0].ztlx)
                    sessionStorage.setItem('bdid',this.form.bdnum);
                    sessionStorage.setItem('bdname',this.form.name);
                    this.$emit('listenOpen');

                    this.$router.push({
                        path:'/navimap',
                        query:{//query类似于get页面刷新字段内容不消失，params类似post，页面刷新参数消失
                            bdid:that.form.name,
                            bdname:that.form.bdnum
                        }
                    });
                }).catch(e=>{
                    console.log(e)
                    this.$message({
                        message:'数据库无此人'
                    })
                })


                // this.$router.push({
                //     path:'/navimap',
                //     query:{//query类似于get页面刷新字段内容不消失，params类似post，页面刷新参数消失
                //         bdid:that.form.name,
                //         bdname:that.form.bdnum
                //     }
                // });


            },


            isEmptyStr(s){
                if(s==undefined||s==null||s==''){
                    return true
                }
                return false;
            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        height: 100%;
        width:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background-color:#324157;*/
        background-image: url("../assets/login/login_bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .loginContainer>div{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /*.loginMes {*/
        /*display: flex;*/
        /*flex-direction: column;*/
    /*}*/
    /*.title{*/
        /*width: 100%;*/
        /*padding: 10px;*/
        /*margin-bottom: 30px;*/
        /*border: none;*/

    /*}*/
    /*.title>p{*/
        /*color:white;*/
        /*font-size: 20px;*/
        /*font-weight: bold;*/
        /*text-align: center;*/
    /*}*/
    .login_top{
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .login_top span{
        color: white;
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
    }
    .login_bottom{
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 80px;
    }

    .login_main{
        width: 350px;
        height: 110px;
        background-color: white;
        border: 1px solid #c2c2c2;
        border-radius: 1px;
        display: flex;
        flex-direction: column;
        border-radius: 5px;

    }
    .login_main>div{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_main>div:first-child{
        border-bottom: 1px solid #c2c2c2;
    }
    .login_main span{
        font-size: 16px;
        color:#c2c2c2;
        margin-left: 10px;
    }
    .login_main img{
        width:30px;
        height: 30px;
        padding:5px;
    }
    .login_main input{
        border:none;
        margin-left: 10px;
    }
    .login_btn{
        margin-top: 20px;
    }
    .login_btn button{
        width: 300px;
        height: 50px;
        border-radius: 50px;
        background-color: #052946;
        color:white;
        font-weight: bold;
        font-size: 18px;
    }
    .el-input{
        flex: 1;
    }
    .el-form{
        width: 100%;
        padding: 20px 0;
    }

    .el-form-item{
        padding-left: 20px;
    }
    /deep/ .el-form-item__label{
        color: white;
    }
    /deep/ .el-form-item__content{
        margin-left: 0px !important;
    }

    /deep/ .el-input__inner {
        /* -webkit-appearance: none; */
        border: 3px solid rgba(32,163,245,0.4);
        background-color: rgba(24,136,203,0.3);
        color:white;
    }

    .el-button--primary {
        /*color: #FFF;*/
        background-color: #00efff;
        border-color: #00efff;
        width: 50%;
    }
    /deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom: 18px;
    }
</style>